<template>
  <div class="contents-boss">
    <ul class="contens border-bottom">
      <!-- v-for="item of list" :key="item.id"-->
       <li>门票</li>
       <li>景区服务</li>
       <li>一日游</li>
       <li>热销门票</li>
    </ul>
    <div class="contens-bill">
      <ul>
          <li class="contens-li" v-for="sort of conList" :key="sort.id">
            <div class="contents-tubiao">
              <span class="iconfont">&#xe620;</span>
            </div>
            {{sort.title}}
            <ul>
                <li class="contens-three" v-for="times of sort.children" :key="times.id">
                  <div class="contens-text" @click="handleTogger(times.id)">
                    {{times.desc}}
                    <div class="price">
                      <span>￥{{times.money}}</span>起
                    </div>
                  </div>
                  <schedule :list="times.children" v-show="showId.includes(times.id)"></schedule>
                </li>
            </ul>
          </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Schedule from './Schedule.vue'
export default {
  name: 'DetailContens',
  props: {
    conList: Array,
    list: Array
  },
  components: {
    Schedule
  },
  data () {
    return {
      showId: []
    }
  },
  methods: {
    handleTogger (id) {
      if (!this.showId.includes(id)) {
        this.showId.push(id)
      } else {
        let newId = this.showId.filter((item) => {
          return item !== id
        })
        this.showId = newId
      }
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .contents-boss
    margin-top 0.2rem
  .contens
    overflow-x: scroll;
    white-space: nowrap;
    background white
    margin-bottom 0.1rem
    li
      float left
      width 25%
      text-align center
      margin 0.2rem auto
      padding-top 0.2rem
  .contens-bill
    margin-top 0.3rem
    font-size 0.4rem
    background white
    .contens-li
      padding-top 0.4rem
    .contents-tubiao
      float left
      background #25A4BB
      margin-left 0.2rem
      width 0.4rem
      height 0.4rem
      text-align center
      border-radius 50%
      margin-right 0.1rem
    span
      color white
    .contens-three
      position relative
      margin-top 0.5rem
      font-size 0.4rem
      .contens-text
        margin-left 0.2rem
        padding-bottom 0.4rem
      .price
        position absolute
        right 0.2rem
        top 0.05rem
        color #CACACA
        span
          color orange
</style>
